import React from "react";
import {Button, DatePicker, Input, Radio, Select, Steps, Tabs} from "antd";

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const {MonthPicker, RangePicker} = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const TabPane = Tabs.TabPane;




export default class Templete extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }


  render() {
    return (
      <div>
        <h3 className="title-h3">测评模板管理</h3>
        <h4 className="title-h4">备孕期测评模板</h4>
        <div className="templete-cont">
          <div className="templete-li">
            <span className="templete-state green">
              <span className="name">使用中</span>
            </span>
            <span className="templete-img">
              <img src="http://pic.qianmi.com/ejz/ejz2.0/img/contract-temp04.png" alt="模板"/>
            </span>
            <div className="caozuo">
              <Button className="btn-dashed">预览</Button>
            </div>
          </div>
        </div>
        <h4 className="title-h4">怀孕期测评模板</h4>
        <div className="templete-cont">
          <div className="templete-li">
            <span className="templete-state green">
              <span className="name">使用中</span>
            </span>
            <span className="templete-img">
              <img src="http://pic.qianmi.com/ejz/ejz2.0/img/contract-temp04.png" alt="模板"/>
            </span>
            <div className="caozuo">
              <Button className="btn-dashed">预览</Button>
            </div>
          </div>
        </div>
        <h4 className="title-h4">产后期测评模板</h4>
        <div className="templete-cont">
          <div className="templete-li">
            <span className="templete-state green">
              <span className="name">使用中</span>
            </span>
            <span className="templete-img">
              <img src="http://pic.qianmi.com/ejz/ejz2.0/img/contract-temp04.png" alt="模板"/>
            </span>
            <div className="caozuo">
              <Button className="btn-dashed">预览</Button>
            </div>
          </div>
          <div className="templete-li">
            <span className="templete-state green">
              <span className="name">使用中</span>
            </span>
            <span className="templete-img">
              <img src="http://pic.qianmi.com/ejz/ejz2.0/img/contract-temp04.png" alt="模板"/>
            </span>
            <div className="caozuo">
              <Button className="btn-dashed">预览</Button>
            </div>
          </div>
        </div>
        <h4 className="title-h4">空状态</h4>
        <div className="templete-cont">
          <div className="empty">
            <h4>暂未使用合同</h4>
            <p>您可以从所有模板中选择并应用模板</p>
          </div>
        </div>
      </div>
    )
  }
}
